<template>
  <div style="margin-top: 5px;">
    <titleBox text="云鹭生活" @click="show = !show"></titleBox>
    <div class="content"
      :style="{ height: show ? height + 'px' : '0px', transition: 'height 0.5s ease-in-out', overflow: 'hidden' }">
      <div ref="content" style="padding:10px;border: 1px solid #11afc180;">
        <div class="top">
          <div :class="isChecked == 0 ? 'top_item_checked' : 'top_item'" @click="isChecked = 0" style="margin-right: 10px;">
            <div class="top_item_leftIcon"></div>
            <div class="top_item_name">文化生活</div>
            <div class="top_item_num">6个</div>
          </div>
          <div :class="isChecked == 1 ? 'top_item_checked' : 'top_item'" @click="isChecked = 1" style="margin-left: 10px;">
            <div class="top_item_leftIcon"></div>
            <div class="top_item_name">活动场所</div>
            <div class="top_item_num">6个</div>
          </div>
        </div>
        <mTable v-if="isChecked == 0" :titleData="titleData" :valueData="valueData"></mTable>
        <mTable v-if="isChecked == 1" :titleData="titleData1" :valueData="valueData1"></mTable>

      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, nextTick } from "vue"
import titleBox from "../mConponents/titleBox.vue"
import mTable from "../mConponents/mTable.vue"

onMounted(() => {
  nextTick(() => {
    height.value = content.value.offsetHeight
    // show.value = true
  })
})

const isChecked = ref(0)
const content = ref(null)
const height = ref(0)
const show = ref(false)
const titleData = [
  {
    name: "活动名称",
    key: "name",
    style: {
      flex: 1,
      textAlign: "left"
    }
  },
  {
    name: "状态",
    key: "state",
    style: {
      width: "80px"
    }
  },
  {
    name: "创建时间",
    key: "date",
    style: {
      width: "80px"
    }
  }
]
const valueData = [
  {
    name: "非遗观赏",
    state: "进行中",
    date: "2025-02-15 17:28"
  },
  {
    name: "逛庙会",
    state: "进行中",
    date: "2025-02-15 17:28"
  },
  {
    name: "诗词大会",
    state: "进行中",
    date: "2025-02-15 17:28"
  },
  {
    name: "美食品尝",
    state: "进行中",
    date: "2025-02-15 17:28"
  },
  {
    name: "书法班",
    state: "进行中",
    date: "2025-02-15 17:28"
  },
  {
    name: "书籍分享交流会",
    state: "进行中",
    date: "2025-02-15 17:28"
  }
]

const titleData1 = [
  {
    name: "场所名称",
    key: "name",
    style: {
      flex: 1,
      textAlign: "left"
    }
  },
  {
    name: "状态",
    key: "state",
    style: {
      width: "80px"
    }
  },
  {
    name: "创建时间",
    key: "date",
    style: {
      width: "80px"
    }
  }
]
const valueData1 = [
  {
    name: "文化广场",
    state: "进行中",
    date: "2025-02-15 17:28"
  },
  {
    name: "书法联系班",
    state: "进行中",
    date: "2025-02-15 17:28"
  },
  {
    name: "书法舞蹈基础班",
    state: "进行中",
    date: "2025-02-15 17:28"
  },
  {
    name: "书法舞蹈基础班",
    state: "进行中",
    date: "2025-02-15 17:28"
  },
  {
    name: "书法舞蹈基础班",
    state: "进行中",
    date: "2025-02-15 17:28"
  }
]

</script>
<style scoped lang="less">
.content {
  background-color: #001a1dcc;
  width: 330px;
  margin-top: 5px;
  // display: flex;
  // align-items: center;
  // justify-content: space-between;

  .top {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 5px;

    .top_item_checked {
      flex: 1;
      padding: 5px 10px 5px 3px;
      display: flex;
      align-items: center;
      border: 2px solid #00C5DB80;
      background: linear-gradient(180deg, rgba(0, 61, 60, 0.5) 0%, rgba(0, 117, 117, 0.5) 100%);

      .top_item_name {
        font-size: 10px;
        color: rgba(213, 242, 255, 1);
        font-weight: bold;
        flex: 1;
      }

      .top_item_num {
        color: rgba(158, 247, 255, 1);
        font-weight: bold;
        font-size: 12px;
      }

      .top_item_leftIcon {
        background-image: url('/img/myimg/lefticon1.png');
        background-size: 17px 15px;
        width: 17px;
        height: 15px;
      }
    }

    .top_item {
      flex: 1;
      padding: 5px 10px 5px 3px;
      display: flex;
      align-items: center;
      border: 2px solid #00C5DB10;
      // border-image-source: ;


      background: linear-gradient(180deg, rgba(0, 61, 60, 0.5) 0%, rgba(0, 117, 117, 0.5) 100%);

      .top_item_name {
        font-size: 10px;
        color: rgba(213, 242, 255, 0.6);
        flex: 1;
      }

      .top_item_num {
        color: rgba(158, 247, 255, 0.6);
        font-weight: bold;
        font-size: 12px;
      }

      .top_item_leftIcon {
        background-image: url('/img/myimg/lefticon1.png');
        background-size: 17px 15px;
        width: 17px;
        height: 15px;
      }
    }
  }
}
</style>
